<script lang="ts" setup>
import service from "@/untils/request.ts";
import {onMounted,ref} from "vue";
import type {Product} from "@/type";

let productData=ref<Product[]>([])
const saveData =   async ()=>{
  try {
    const response=await service.get("/product/details")
    productData.value=response
  }catch (e){
    console.log("error------")
  }
}
console.log(productData)
onMounted(saveData)

// const productData=[
//     {id:10,title:"java圣经",des:"2025版"},
//     {id:11,title:"电气圣经",des:"2024版"},
//     {id:12,title:"机械圣经",des:"2023版"}
// ]

//query参数
//params参数(变量参数) 形式：product/details/:id --result风格
</script>

<template>
    <div class="main">
        <div class="header">
            <h1>商品管理</h1>
        </div>

        <div class="main_body">
            <div class="sbar">
                <ul>
                    <!-- <li v-for="p in productData" :key="p.id"><router-link :to="`/product/details?title=${p.title}&id=${p.id}`">{{ p.title }}</router-link></li> -->
                    <!-- <li v-for="p in productData" :key="p.id">
                        <router-link :to="{
                           name:'details', 
                            query:{
                                title:p.title,
                                id:p.id,
                                des:p.des
                                }
                                }">{{ p.title }}</router-link>
                            </li> -->
                            <!-- path:/product/details -->
                            <!-- <li v-for="p in productData" :key="p.id"><router-link :to="`/product/details/${p.id}/${p.title}`">{{ p.title }}</router-link></li> -->
                    <li v-for="p in productData" :key="p.id">
                        <router-link :to="{
                            name:'details',
                            params:{
                                title:p.title,
                                id:p.id,
                                des:p.des
                                }
                        }">{{ p.title }}</router-link>
                    </li>

                </ul>
            </div>
            <div class="content">
                <router-view class="cpm"></router-view>
            </div>
        </div>
    </div>
</template>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
}
.main_body{
    display: flex;
    height: 70vh;
}
.sbar{
    width: 200px;
    background-color: bisque;
}
.content{
    flex: 1;
    overflow: auto;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
ul>li{
    margin: 20px;
}
li>a{
    text-decoration: none;
    color: cadetblue;
}
.cpm{
    height: 70vh;
}
</style>